<template>
  <!--历史合同列表-->
  <div>
    <el-dialog title="合同信息" :close-on-click-modal="false" :visible.sync="contractListVisible" width="80%">
      <!--商铺信息开始-->
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-goods"></i>
            商圈名
          </template>
          {{ houseAllContent.blockName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-menu"></i>
            楼栋名
          </template>
          {{ houseAllContent.buildingName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-circle-check"></i>
            房号
          </template>
          {{ houseAllContent.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-operation"></i>
            楼层
          </template>
          {{ houseAllContent.floor }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-baseball"></i>
            完整门牌号
          </template>
          {{ houseAllContent.houseName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            商圈地址
          </template>
          {{ houseAllContent.address }}
        </el-descriptions-item>
      </el-descriptions>
      <!--商铺信息结束-->
      <!--当前商铺的所有合同信息开始-->
      <el-form :model="queryParams" style="margin-top: 5px" ref="queryForm" size="small" :inline="true"
               label-width="68px">
        <el-form-item label="合同状态" prop="contractState">
          <el-select
            v-model="queryParams.contractState"
            placeholder="合同类型"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.pay_contract_state"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-select
            v-model="queryParams.contractType"
            placeholder="合同类型"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.pay_contract_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="loadContractByHouseId">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table border v-loading="loading" :data="contractList">
        <el-table-column label="合同编号" align="center" prop="code" width="100"/>
        <el-table-column label="合同状态" align="center" prop="state" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pay_contract_state" :value="scope.row.state"/>
          </template>
        </el-table-column>
        <el-table-column label="公司名" align="center" prop="ownerCompany" width="100"/>
        <el-table-column label="业主姓名" align="center" prop="ownerName" width="100"/>
        <el-table-column label="租金" align="center" prop="rentFee" width="100"/>
        <el-table-column label="行业" align="center" prop="userTrade" width="100"/>
        <el-table-column label="行业说明" align="center" prop="userTradeDetail" width="100"/>
        <el-table-column label="合同类型" align="center" prop="contractType" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pay_contract_type" :value="scope.row.contractType"/>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center" prop="beginDate" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.beginDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center" prop="endDate" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效时间" align="center" prop="period"></el-table-column>
        <el-table-column label="操作" width="200px" fixed="right" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state != 1"
              icon="el-icon-edit"
              @click="handleCancelContract(scope.row)"
            >撤销合同
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewContractFee(scope.row)"
            >查看收费项
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--当前商铺的所有合同信息结束-->
    </el-dialog>

    <!--收项目的弹出层-->
    <contract-fee-list v-if="showContractFeeItemList" ref="contractFeeItemList"
                       @after="loadContractByHouseId"></contract-fee-list>

  </div>
</template>
<script>
import {getAllResourceByHouseId} from "@/api/system/house";
import {cancelContract, listContractByHouseId} from "@/api/pay/contract";
import contractFeeList from './contract-fee-list'

export default {
  dicts: ['pay_contract_type', 'pay_contract_state'],
  components: {
    contractFeeList
  },
  data() {
    return {
      loading: false,
      contractListVisible: false,
      //是否显示合同收费项目的弹出层
      showContractFeeItemList: false,
      //存放House的所有信息
      houseAllContent: {},
      //业主所有信息
      ownerUserContent: {},
      queryParams: {
        //当前商铺ID
        houseId: undefined,
        contractState: null,
        contractType: null
      },
      //合同列表数据
      contractList: []
    };
  },
  created() {
  },
  methods: {
    init(houseId) {
      this.queryParams.houseId = houseId;
      this.contractListVisible = true;
      getAllResourceByHouseId(houseId).then(res => {
        this.houseAllContent = res.data;
      })
      this.loadContractByHouseId();
    },
    //查询合同信息
    loadContractByHouseId() {
      this.loading = true;
      listContractByHouseId(this.queryParams).then(res => {
        this.contractList = res.data;
        this.loading = false;
      })
    },
    //重置
    resetQuery() {
      this.queryParams.contractState = undefined
      this.queryParams.contractType = undefined
      this.loadContractByHouseId();
    },
    /** 查看合同收费项 */
    handleViewContractFee(row) {
      this.showContractFeeItemList = true;
      this.$nextTick(() => {
        //id为合同ID
        this.$refs.contractFeeItemList.init(row.id);
      });
    },
    /** 撤销合同 */
    handleCancelContract(row) {
      this.$modal.confirm('是否确认撤销合同编号为"' + row.code + '"的合同吗？').then(function () {
        return cancelContract(row.id);
      }).then(() => {
        this.loadContractByHouseId();
        this.$modal.msgSuccess("撤销成功");
      }).catch(() => {
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.stepRow {
  margin-top: 20px;
  margin-right: 60px !important;
}
</style>
